<template>
  <div class="brokerItem border-2 border-r bg-69 boxS-i-4">
    <div class="brokerTop">
      <div class="brokericon">
        <img src="../../assets/icon/broker.svg" alt="">
      </div>
      <div class="brokerinfo flex-left-nowrap">
        <div class="head_img">
          <img :src="data.brokerInfo.head_url" alt="">
        </div>
        <div class="brokername mgl-13 fontW-9 font-28 font-f-ib color-f">{{ data.brokerInfo.name}}</div>
      </div>
    </div>
    <div class="gropInfo flex-s-between">
      <div class="grop_item boxS-i-4 flex-1 text-c bg-theme color-0 fontW-b font-10 font-f-ib border-lb">
        <div class="item_t">{{data.openGrop}}</div>
        <div class="item_b">{{$t('broker.openGroup')}}</div>
      </div>
      <div class="grop_item boxS-i-4 flex-1 text-c bg-theme color-0 fontW-b font-10 font-f-ib">
        <div class="item_t">{{data.joingrop}}</div>
        <div class="item_b">{{$t('broker.tuxedo')}}</div>
      </div>
      <div class="grop_item boxS-i-4 flex-1 text-c bg-theme color-0 fontW-b font-10 font-f-ib">
        <div class="item_t">{{data.success_rate}}%</div>
        <div class="item_b">{{$t('broker.successRate')}}</div>
      </div>
      <div class="grop_item boxS-i-4 flex-1 text-c bg-theme color-0 fontW-b font-10 font-f-ib border-rt">
        <div class="item_t">{{data.Trading_volume}}ETH</div>
        <div class="item_b">{{$t('broker.tradingVolume')}}</div>
      </div>
    </div>
    <div class="socialBox">
      <social-item :socialData="data.social_way"/>
    </div>
    <div class="theme-color text-c font-10 fontW-b font-f-ib mgtb-10">{{$t('index.isOpen')}}</div>
    <div class="gropBox flex-s-between" v-if="data.gropData">
      <div class="gropData_item" v-for="item in data.gropData" :key="item.id">
        <img :src="item.grop_url" alt="">
      </div>
    </div>
  </div>
</template>
<script>
import SocialItem from './SocialItem'
export default {
  props: ['data'],
  components: {
    SocialItem
  },
  created () {
    // console.log(this.data)
  }
}
</script>
<style lang="less" scoped>
.brokerItem {
  width: 100%;
  height: auto;
  overflow: hidden;
  .brokerTop {
    position: relative;
    padding: 10px;
    .brokericon {
      position: absolute;
      top: 10px;
      left: 10px;
    }
    .brokerinfo {
      overflow: hidden;
      margin: 0 10%;
      .head_img {
        img {
          display: block;
          border-radius: 50%;
          object-fit: contain;
          width: 60px;
          height: 60px;
        }
      }
      // .brokername {}
    }
  }
  .gropInfo {
    padding: 10px;
    .grop_item {
      width: 24%;
      margin: 0 0.5%;
    }
  }
  .socialBox {
    padding:0 10px;
  }
  .gropBox {
    padding:0 10px 10px;
    .gropData_item {
      width: 24%;
      margin: 0 0.5%;
      img {
        width: 100%;
      }
    }
  }
}
</style>
